<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精品推荐新增</title>
<script src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
<link href="../plugin/admin/css/style.min.css" rel="stylesheet">
<link href="../plugin/admin/css/materialdesignicons.min.css"
	rel="stylesheet">
<script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugin/ckeditor/ckeditor.js"></script>
<script>
	var pageNum = 1;
	$(function() {
		getData(1);
		$("#page li")
				.click(
						function() {
							//alert($(this).attr("pageNum"))
							//去除原来节点的激活状态,因为第一个点是前一页
							$("#page li").eq(pageNum).removeClass("active");
							//前一页
							if ($(this).attr("pageNum") == "pre") {
								//1.没有前一页
								if (pageNum == 1) {
									alert("不要点击了，已经是第一页了")
									//设置第一页为活动页
									$("#page li").eq(pageNum)
											.addClass("active");
								}
								//有前一页
								else {
									pageNum = pageNum - 1;
									$("#page li").eq(pageNum)
											.addClass("active");
									getData(pageNum);
								}
							} else if ($(this).attr("pageNum") == "next") {
								//alert("当前pageNum:" + pageNum)
								//1.没有下一页了
								if ($("#page li").eq(pageNum).next().attr(
										"pageNum") == "next") {
									alert("不要点击了，已经是最后一页了")
									//设置第一页为活动页
									$("#page li").eq(pageNum)
											.addClass("active");
								}
								//有下一页
								else {
									//alert("hahah ")
									pageNum++;
									$("#page li").eq(pageNum)
											.addClass("active");
									getData(pageNum);
								}
							}
							//既不是前一页，也不是后一页
							else {
								//去除原来节点的激活状态,因为第一个点是前一页
								$("#page li").eq(pageNum).removeClass("active");
								//设置当前活动节点
								pageNum = $(this).attr("pageNum");
								//激活当前节点
								$(this).addClass("active")
								//后台获取数据
								getData(pageNum);
							}
						})
	})
	function getData(pageNum) {
		$
				.ajax({
					url : '../blog/getlist',
					dataType : "json",
					type : 'POST',
					cache : false,
					//async: true,//请求是否异步，默认为异步，这也是ajax重要特性
					data : {
						pageNum : pageNum,
						pageSize : 4
					}, //参数值
					success : function(data) {
						console.log("data:" + data)
						$("#jptjMain").empty();
						var jptjBody = "";
						$
								.each(
										data.rows,
										function(n, blog) {
											var tmp = "<div class='col-xs-6 col-md-3 visit'><a href='../blog/Details?id="
													+ blog.id
													+ "' class='thumbnail'> <img src='"+blog.path+"'/><h4>"
													+ blog.title
													+ "</h4> <br><p>讲师："
													+ blog.author
													+ "<b>免费</b></p></a></div>"
											jptjBody = jptjBody + tmp;
										})
						$("#jptjMain").append(jptjBody)
					},
					complete : function() {
						console.log("获取" + pageNum + "页数据")
					},
					error : function() {
						alert("服务器暂时不可用")
					}
				});
	}
</script>
</head>
<style>
.visit img {
	width: 400px;
	height: 220px;
}
</style>
<body>
	<!--精品推荐-->
	<h2 id="jptj">精品推荐</h2>
	<a href="../admin/tapPaging">查看全部
		</h2>
		<div class="row" id="jptjMain">
			<!-- 主体 -->
		</div>
		<hr>
		<h5>
			圆角边框
			<code>.pagination-circle</code>
		</h5>
		<nav>
			<ul class="pagination pagination-lg" id="page">
				<li class="disabled" pageNum="pre"><a href="#!"> <span><i
							class="mdi mdi-chevron-left"></i></span>
				</a></li>
				<th:block th:each="num:${navigatepageNums}">
					<th:block th:if="${num} eq 1">
						<li th:pageNum="${num}" th:class="active"><a href="#"
							th:text="${num}"></a></li>
					</th:block>
					<th:block th:if="${num} ne 1">
						<li th:pageNum="${num}"><a href="#" th:text="${num}"></a></li>
					</th:block>
				</th:block>
				<!--  
                    <li class="active" pageNum="1"><a href="#">1</a></li>
                    <li pageNum="2"><a href="#!">2</a></li>
                    <li pageNum="3"><a href="#!">3</a></li>
                    <li pageNum="4"><a href="#!">4</a></li>
                    <li pageNum="5"><a href="#!">5</a></li>
                  -->
				<li pageNum="next"><a href="#!"> <span><i
							class="mdi mdi-chevron-right"></i></span>
				</a></li>
			</ul>
		</nav>
</body>
</html>